<template>
  <el-drawer
      :title="'订单详情'"
      :visible="visible"
      size="80vw"
      @close="closeDialog"
      append-to-body
    >
    <div style="padding:20px">
      
      <div class="avue-crud">
        <div>
          <h5 class="form-title-1">商品信息</h5>
        </div>
        <el-table :data="dataForm.details" border>
          <el-table-column
            type="index"
            header-align="center"
            align="center"
            label="编号">
          </el-table-column>
          <el-table-column
            prop="spuTitle"
            header-align="center"
            align="center"
            label="商品名称">
          </el-table-column>
          <el-table-column
            prop="point"
            header-align="center"
            align="center"
            label="所需积分">
          </el-table-column>
          <el-table-column
            prop="count"
            header-align="center"
            align="center"
            label="数量">
          </el-table-column>
          <el-table-column
            prop="marketPrice"
            header-align="center"
            align="center"
            label="市场价格"
            :formatter="formatMoney">
          </el-table-column>
        </el-table>
      </div>

      <div class="avue-crud" style="margin-top: 20px">
        <h5 class="form-title-1">买家信息</h5>
        <el-table :data="[dataForm.shopUser]" border>
          <el-table-column
            type="index"
            header-align="center"
            align="center"
            label="编号">
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            label="头像"
          >
            <template slot-scope="scope">
              <el-avatar icon="el-icon-user-solid" :src="scope.row.headerUrl"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column
            prop="loginAccount"
            header-align="center"
            align="center"
            label="登录账号">
          </el-table-column>
          <el-table-column
            prop="nickName"
            header-align="center"
            align="center"
            label="昵称">
          </el-table-column>
          <el-table-column
            prop="realName"
            header-align="center"
            align="center"
            label="真实姓名">
          </el-table-column>
          <el-table-column
            :prop="'shopUserInfo.pointBalance'"
            header-align="center"
            align="center"
            label="积分余额">
          </el-table-column>
          <el-table-column
            :prop="'shopUserInfo.cashBalance'"
            header-align="center"
            align="center"
            label="充值钱包余额">
          </el-table-column>
          <el-table-column
            :prop="'shopUserInfo.profitBalance'"
            header-align="center"
            align="center"
            label="分润钱包余额">
          </el-table-column>
        </el-table>
      </div>

      <div class="avue-crud" style="margin-top: 20px">
        <h5 class="form-title-1">收货人信息</h5>
        <el-table :data="[dataForm]" border>
          <el-table-column
            type="index"
            header-align="center"
            align="center"
            label="编号">
          </el-table-column>
          <el-table-column
            prop="province"
            header-align="center"
            align="center"
            label="省份">
          </el-table-column>
          <el-table-column
            prop="city"
            header-align="center"
            align="center"
            label="城市">
          </el-table-column>
          <el-table-column
            prop="area"
            header-align="center"
            align="center"
            label="区域">
          </el-table-column>
          <el-table-column
            prop="address"
            header-align="center"
            align="center"
            label="详细地址">
          </el-table-column>
          <el-table-column
            prop="contacts"
            header-align="center"
            align="center"
            label="收货人姓名">
          </el-table-column>
          <el-table-column
            prop="contactNumber"
            header-align="center"
            align="center"
            label="收货人电话">
          </el-table-column>
        </el-table>
      </div>

    </div>


    <!-- <div class="dialog__footer">
      <el-button @click="closeDialog">取 消</el-button>
    </div> -->


  </el-drawer>
</template>

<script>
import {getObj} from '@/api/shop_order/point_order';
export default {
  props:{
    visible: {
      type: Boolean,
      default: false
    },
  },
  data(){
    return{
      dataForm:{
        skuDetails:[],
        coupons:[],
        shopUser:{}
      }
    }
  },
  methods:{

    /**
     * 初始化
     */
    init(orderId){
      if(orderId){
        getObj(orderId).then(res=>{
          let data = res.data.data
          this.dataForm = data
        })
      }
    },

     //重置表单
    closeDialog() {
      this.$emit('update:visible', false)
    },
  }
}
</script>

<style lang="scss" scoped>

.dialog__footer {
  display: block;
  padding: 10px 16px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-top: 1px solid #f0f0f0;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #fff;
  text-align: right;
}

.form-title-1 {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin: 0 0 18px 0;

  &:before {
    content: '';
    display: block;
    width: 4px;
    height: 16px;
    background: #4193ff;
    margin-right: 10px;
  }
}
</style>